<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .odd {
            background: #999;
        }
        .monkey {
            height: 20px;
            margin-top: 20px;
            background-color: yellow;
            border-left: 40px solid red;
            border-right: 40px solid red;
            border-radius: 6px;
        }
    </style>
</head>
<body>
    <div id="app">
        <label>姓名</label>
        <input type="text" v-model="name">
        <br>
        <label>年龄</label>
        <input type="text" v-model="age">
        <br>
        <label>性别</label>
        <select v-model="sex">
            <option value="1">男</option>
            <option value="2">女</option>
        </select>
        <br>
        <label>手机</label>
        <input type="text" v-model="phone">
        <br>
        <button @click="add">新增</button>
        <table border="1">
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>年龄</th>
                    <th>手机</th>
                    <th>注册时间</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr :class="{odd: index % 2}" v-for="(item, index) in studentsList" :key="index">
                    <td>{{item.name}}</td>
                    <td>{{item.sex}}</td>
                    <td>{{item.age}}</td>
                    <td>{{item.phone}}</td>
                    <td>{{item.time}}</td>
                    <td>
                        <button>del</button>
                    </td>
                </tr>
            </tbody>
        </table>
        <br>
        <br>
        <button @click="big">big</button>
        <div class="monkey" :style="{width: length + 'px'}"></div>
    </div>
    <script src="../vue.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                name: '',
                age: '',
                sex: '2',
                phone: '',
                studentsList: [],
                // 金箍棒的长度
                length: 200
            },
            filters: {
                timeFormat(val) {
                    let year = val.getFullYear();
                    let month = val.getMonth() + 1;
                    let date = val.getDate();
                    let hour = val.getHours();
                    let min  = val.getMinutes()

                    return `${year}-${month}-${date} ${hour}:${min}`
                }
            },
            created() {
                this.studentsList = JSON.parse(localStorage.getItem('studentsList')) || []
            },
            methods: {
                add() {
                    let time = new Date();
                    let year = time.getFullYear();
                    let month = time.getMonth() + 1;
                    let date = time.getDate();
                    let hour = time.getHours();
                    let min  = time.getMinutes()
                    let obj = {
                        name: this.name,
                        age: this.age,
                        sex: this.sex,
                        phone: this.phone,
                        time: `${year}-${month}-${date} ${hour}:${min}`
                    }
                    this.studentsList.push(obj);
                    // 存入本地存储
                    localStorage.setItem('studentsList', JSON.stringify(this.studentsList))
                    this.name = '';
                    this.age = '';
                    this.sex = '1';
                    this.phone = '';
                },
                // 金箍棒变大
                big() {
                    this.length += 20;
                }
            }
        })
    </script>
</body>
</html>